<template>
  <div v-if="data._isInit">
    <el-collapse-item :title="$t('功能配置')" name="1">
      <div style="padding: 10px 0">
        <div
          class="learun-row-form-input"
          :key="item.id"
          v-for="(item, index) in config.list"
        >
          <el-form-item :label="$t('绑定功能')" style="margin-bottom: 8px">
            <l-tree-select :options="modulesTree" v-model="item.moduleId">
            </l-tree-select>
          </el-form-item>
          <el-form-item :label="$t('图标颜色')" style="margin-bottom: 0">
            <l-input-color
              v-model="item.color"
              :placeholder="$t('please enter')"
            ></l-input-color>
          </el-form-item>
          <el-button
            :title="$t('Delete')"
            @click="handleRemoveCol(index)"
            class="learun-row-form-input-delete"
            circle
            plain
            size="mini"
            type="danger"
          >
            <i class="el-icon-close"></i>
          </el-button>
        </div>
        <div class="mt-8">
          <el-button type="primary" size="mini" @click="handleAddCol"
            >{{ $t('添加') }}</el-button
          >
        </div>
      </div>
    </el-collapse-item>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import configMixins from "../mixins/config";
export default {
  mixins: [configMixins()],
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["modules"]),
    myModules() {
      return this.modules.filter((t) => t.f_EnabledMark == 1);
    },
    modulesTree() {
      const res = this.$toTree(
        this.myModules,
        "f_ModuleId",
        "f_ParentId",
        "f_EnCode",
        "f_FullName"
      );
      return res.filter((t) => t.f_ParentId == "0");
    },
  },
  methods: {
    init(data) {
      const config = { list: [] };
      this.commonInit(data, config);
    },
    handleAddCol() {
      this.config.list.push({
        id: this.$uuid(),
        moduleId: "",
        color: "#409eff",
      });
    },
    handleRemoveCol(index) {
      this.config.list.splice(index, 1);
    },
  },
};
</script>

